/**
 * <pre>
 *     author : XML
 *     e-mail : 946891360@qq.com
 *     time   : 2019/06/10
 *     version:
 *     desc   :
 * </pre>
 */

import React, {Component} from 'react';
import {StyleSheet, Text, View, TextInput} from 'react-native';
import DataStore from '../expand/dao/DataStore'

export default class DataStoreDemoPage extends Component<Props> {

    constructor(props) {
        super(props);
        this.state = {
            showText: '',
        };
        this.dataStore = new DataStore();
    }


    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>离线缓存框架设计</Text>
                <TextInput style={styles.input} onChangeText={text => this.value = text}/>
                <View style={styles.input_container}>
                    <Text onPress={() => this.loadData()}>获取 </Text>
                </View>
                <Text> {this.state.showText} </Text>
            </View>
        );
    }


    /**
     * 获取数据
     * @returns {Promise<void>}
     */
    loadData() {
        let url = `https://api.github.com/search/repositories?q=${this.value}`
        this.dataStore.fetchData(url)
            .then(data => {
                let showData = `初次数据加载时间: ${new Date(data.timeStamp)}\n${JSON.stringify(data.data)}`;
                this.setState({
                    showText: showData
                })
            }).catch(error => error && console.log(error.toString()))
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    input_container: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-around'
    },
    input: {
        height: 50,
        borderColor: 'black',
        borderWidth: 1,
    },
});

